<template>
	<div class="announcement-container">
		<!-- 左侧喇叭图标 -->
		<div class="announcement-icon">
			<image class="laba" src="/static/index/laba.png" mode=""></image>
		</div>

		<!-- 右侧滚动公告内容 -->
		<div class="announcement-content">
			<div class="announcement-scroll" :style="{ transform: `translateX(${scrollPosition}px)` }">
				<div class="announcement-items">
					<!-- 渲染公告内容，复制一份用于无缝滚动 -->
					<span class="announcement-item" v-for="(item, index) in [...announcements, ...announcements]"
						:key="index + (index < announcements.length ? 'a' : 'b')">
						{{ item }}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Announcement',
		props: {
			// 公告内容数组
			announcements: {
				type: Array,
				default: () => [
					'欢迎使用本系统，祝您使用愉快！',
					'系统将于今晚23:00进行维护，请提前做好准备',
					'最新活动：邀请好友注册可获得额外积分',
					'重要通知：请及时更新您的个人信息'
				],
				validator: (value) => {
					return Array.isArray(value) && value.length > 0;
				}
			},
			// 滚动速度（像素/秒）
			speed: {
				type: Number,
				default: 50
			},
			// 每条公告之间的间隔
			gap: {
				type: Number,
				default: 30
			}
		},
		data() {
			return {
				scrollPosition: 0,
				itemWidths: [],
				containerWidth: 0,
				totalWidth: 0,
				animationFrameId: null
			};
		},
		mounted() {
			this.initScroll();
			window.addEventListener('resize', this.handleResize);
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.handleResize);
			if (this.animationFrameId) {
				cancelAnimationFrame(this.animationFrameId);
			}
		},
		methods: {
			// 初始化滚动
			initScroll() {
				this.$nextTick(() => {
					this.calculateWidths();
					this.startScroll();
				});
			},
			// 计算元素宽度
			calculateWidths() {
				const container = this.$el.querySelector('.announcement-content');
				const items = this.$el.querySelectorAll('.announcement-item');

				this.containerWidth = container.offsetWidth;
				this.itemWidths = Array.from(items).map(item => item.offsetWidth);

				// 计算总宽度（所有公告 + 间隔）
				this.totalWidth = this.itemWidths.reduce((sum, width, index) => {
					return sum + width + (index < this.announcements.length * 2 - 1 ? this.gap : 0);
				}, 0);
			},
			// 开始滚动动画
			startScroll() {
				let lastTime = 0;

				const animate = (timestamp) => {
					if (!lastTime) lastTime = timestamp;
					const deltaTime = timestamp - lastTime;
					lastTime = timestamp;

					// 根据时间和速度计算滚动距离
					this.scrollPosition -= (this.speed / 1000) * deltaTime;

					// 当滚动超过一半时，重置位置实现无缝滚动
					if (Math.abs(this.scrollPosition) >= this.totalWidth / 2) {
						this.scrollPosition += this.totalWidth / 2;
					}

					this.animationFrameId = requestAnimationFrame(animate);
				};

				this.animationFrameId = requestAnimationFrame(animate);
			},
			// 处理窗口大小变化
			handleResize() {
				// 停止当前动画
				if (this.animationFrameId) {
					cancelAnimationFrame(this.animationFrameId);
				}

				// 重新计算并开始滚动
				this.initScroll();
			}
		}
	};
</script>

<style scoped>
	.laba {
		width: 40rpx;
		height: 40rpx;
	}

	.announcement-container {
		display: flex;
		align-items: center;
		padding: 8px 16px;
		background-color: #fffbe6;
		border: 1px solid #ffe88b;
		border-radius: 4px;
		min-width: 300px;
		max-width: 800px;
		width: 100%;
		box-sizing: border-box;
	}

	.announcement-icon {
		color: #faad14;
		margin-right: 12px;
		font-size: 18px;
		flex-shrink: 0;
	}

	.announcement-content {
		flex-grow: 1;
		overflow: hidden;
		position: relative;
		height: 24px;
	}

	.announcement-scroll {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		white-space: nowrap;
		transition: transform 0s linear;
	}

	.announcement-items {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.announcement-item {
		color: #854d27;
		font-size: 14px;
		margin-right: 30px;
		/* 间隔通过CSS和JS共同控制 */
		line-height: 24px;
	}
</style>